<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
      <!-- 搜索开始 -->
      <SearchForm
        ref="SearchForm"
        :routeQuery="$route.query.subjectName"
        :name="name"
        @doSearch="handleSearch"
        @open="openDialog"
      ></SearchForm>
      <!-- end -->
      <el-alert
        v-if="cResultTip"
        :title="cResultTip"
        :closable="false"
        type="info"
        class="alert"
        show-icon>
      </el-alert>
      <!-- 表格开始 -->
      <TableList
        :data="tableData"
        :name="name"
        @editState="editState"
        @edit="edit"
        @del="del"
      ></TableList>
      <!-- end -->
       <!-- 分页 -->
      <PageTool
      class="pagination"
      @pageChange="handleCurrentChange"
      @pageSizeChange="handleSizeChange"
      :total="totals"
      :paginationPage="queryParams.page"
      :paginationPagesize="queryParams.pagesize"
      ></PageTool>
      <!-- end -->
      <!-- 弹窗 -->
      <el-dialog
        width="30%"
        :title="currentData?'编辑标签':'新增标签'"
        :visible.sync="isShowDialog"
        v-if="isShowDialog" >
      <TagsAddOrEdit
        @close="isShowDialog=false"
        @refresh="getList"
        :current-data="currentData"
        :subjectID="queryParams.subjectID"
      ></TagsAddOrEdit>
      </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import PageTool from '../../module-dashboard/components/pageTool.vue'
import TableList from './components/table-list.vue'
import SearchForm from './components/search-form.vue'
import TagsAddOrEdit from '../components/tags-add-or-edit.vue'
import { list, remove, changeState } from '@/api/hmmm/tags'
import { simple } from '@/api/hmmm/subjects'
import { parseTime } from '@/utils/index'
import { status } from '@/api/hmmm/constants'
export default {
  components: { TagsAddOrEdit, SearchForm, TableList, PageTool },
  data () {
    return {
      name: '标签',
      currentData: null,
      isShowDialog: false,
      isLoading: false,
      totals: '',
      queryParams: {
        page: 1,
        pagesize: 10
      },
      tableData: []
    }
  },
  computed: {
    status () {
      return status
    },
    cResultTip () {
      return `一共 ${this.totals} 条数据`
    }
  },
  async created () {
    if (this.$route.query.subjectName) {
      const res = await simple()
      const ele = res.data.find(item => item.label === this.$route.query.subjectName)
      this.queryParams.subjectID = ele.value
      return this.getList()
    }
    this.getList()
  },
  methods: {
    // 搜索
    handleSearch (val) {
      this.queryParams = val.state === 1 || val.state === 0 ? { tagName: val.name, state: val.state } : { tagName: val.name }
      this.getList()
    },
    // 渲染列表
    async getList () {
      try {
        this.isLoading = true
        const res = await list(this.queryParams)
        this.tableData = res.data.items.reverse()
        this.totals = res.data.counts
        this.tableData.forEach(item => {
          item.addDate = parseTime(item.addDate)
        })
        this.isLoading = false
      } catch (error) {
        console.log(error)
        this.isLoading = true
      }
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.queryParams.pagesize = val
      if (this.queryParams.page === 1) {
        this.getList(this.queryParams)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.queryParams.page = val
      this.getList()
    },
    // 打开弹窗
    openDialog () {
      this.currentData = null
      this.isShowDialog = true
    },
    // 修改功能
    edit (val) {
      this.isShowDialog = true
      this.currentData = val
    },
    // 删除功能
    del (val) {
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(val)
        if (this.tableData.length === 1 && this.queryParams.page > 1) {
          this.queryParams.page--
        }
        this.getList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async doSwitch (row) {
      var data = {
        id: row.id,
        state: Number(!row.state)
      }
      console.log(data)
      await changeState(data)
        .then(response => {
          this.$message.success('操作成功!')
          this.getList()
        })
        .catch(response => {
          this.$message.error(status + '失败!')
        })
    },
    // 启用、禁用
    editState (val) {
      this.doSwitch(val)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.demo-form-inline{
  display: flex;
  justify-content: space-between;
}
.alert {
  margin: 10px 0px;
}
.pagination {
  float: right;
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>

<style>
.el-table th {
  background-color: #fafafa;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
.disabled td {
  background-color: #f9f9f9;
  color: #c1c1c1;
}
.disabled .el-button--primary,
.disabled .el-button--danger {
  background-color: #dbdada;
  border: 1px solid #dbdada;
  color: #999;
  cursor: not-allowed;
}
</style>
